<div class="m-l nav navbar-nav m-t block">
	<span> 产品管理 ></span>
	<span> 设备管理 ></span>
	<span> 列表</span>
</div>


<div class="m-t-lg">
	<div class="wrapper-sm">
		<div class="panel panel-default">
			<div class="panel-body">
				<div style="border-color: #e5e5e5;padding: 10px;background-color: #e5e5e5">
					<div class="row">
						<div class="col-md-2">
							<div style="margin-top: 10px;">设备总数：{{devicesNum}}台</div>
						</div>
						<div class="col-md-6">
							<div class="input-group">
								<input type="text" class="form-control" placeholder="设备编号/产品名称/模块编号" [(ngModel)]="keyWord">
								<span class="input-group-btn">
					        <button class="btn btn-default" type="button" (click)="search()">搜索</button>
					      </span>
							</div>
						</div>
						<div class="col-md-4" style="text-align: right">
							<button class="btn btn-info" (click)="btype=1;myModal.show()">
							新增
						</button>
						</div>
					</div>
				</div>
				<div class="table-responsive">
					<table class="table" style="word-break:break-all;word-wrap:break-word">
						<thead>
							<tr>
								<th>设备编号</th>
								<th>产品名称</th>
								<th>剩余流量</th>
								<th>群组位置</th>
								<th>模块编号</th>
								<th>所属渠道商</th>
								<th>维保人员</th>
								<th>在离线状态</th>
								<th>占用/空闲</th>								
								<th>是否故障</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<tr *ngFor="let devdata of devData">
								<td>{{devdata.locker_number}}</td>
								<td>{{devdata.product_name}}</td>
								<td>--</td>
								<td>{{devdata.locker_address}}</td>
								<td>{{devdata.module_number}}</td>
								<td>{{devdata.locker_channel_trader}}</td>
								<td>{{devdata.locker_maintenance}}</td>
								<td>--</td>							
								<td>
									<span *ngIf='devdata.door_use==2'>占用</span>
									<span *ngIf='devdata.door_use==3'>空闲</span>
								</td>
								<td>
									<span *ngIf='devdata.is_malfunction==0'>否</span>
									<span *ngIf='devdata.is_malfunction==1'>是</span>
								</td>
								<td>
									<button class="btn btn-xs btn-info" [routerLink]="['devinfo',devdata.locker_number]">详情</button>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				<app-pagination [pageModel]="pageModel" (pageChanged)="getdata($event)"></app-pagination>
			</div>
		</div>
	</div>
</div>


<div>
	<div bsModal #myModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg" style="width: 800px">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" *ngIf="btype==1">新增设备</h4>
					<h4 class="modal-title" *ngIf="btype==2">删除设备</h4>
					<!--  <button class="close" aria-label="Close" (click)="closeModal()">
		      <span aria-hidden="true">&times;</span>
		    </button> -->
				</div>
				<div class="modal-body">
					<div class="form-horizontal" *ngIf="btype==1">
						<div class="form-group row">
							<label class="col-sm-3  control-label" style="text-align: right">产品名称</label>
							<div class="col-sm-7">
								<select class="form-control" [(ngModel)]='product_id'>
									<option value="">请选择</option>
		            	<option *ngFor="let product of productdata" value="{{product.id}}">{{product.product_name}}</option>
		            </select>
							</div>
							<div class="col-sm-2" style="color:red;margin-top: 10px;">
								<p [hidden]="product_id">必选</p>
							</div>
						</div>
						<div class="form-group row">
							<label class="col-sm-3  control-label" style="text-align: right">模块编号</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" placeholder="请输入设备id" [(ngModel)]='locker_module_number'>
							</div>
							<div class="col-sm-2" style="color:red;margin-top: 10px;">
								<p [hidden]="locker_module_number">必填</p>
							</div>
						</div>
							<div class="form-group row">
							<label class="col-sm-3  control-label" style="text-align: right">物联卡ID</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" placeholder="请输入物联卡id" [(ngModel)]='locker_imei_number'>
							</div>
						</div>
						<div class="form-group row">
							<label class="col-sm-3  control-label" style="text-align: right">所属渠道商</label>
							<div class="col-sm-7">
								<select [(ngModel)]='locker_channel_trader' class="form-control">
		            	<option>--请选择--</option>
		            	<option>xxxx</option>
		            	<option>yyyy</option>
		            </select>
							</div>
						</div>
						<div class="form-group row">
							<label class="col-sm-3 control-label" style="text-align: right">GPS经度</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" placeholder="请输入详细地址" [(ngModel)]='locker_longitude'>
							</div>
						</div>
						<div class="form-group row">
							<label class="col-sm-3  control-label" style="text-align: right">GPS纬度</label>
							<div class="col-sm-7">
								<input type="text" class="form-control" placeholder="请输入详细地址" [(ngModel)]='locker_latitude'>
							</div>
						</div>
					</div>
					<div *ngIf="btype==2">
						<div style="background-color: #e5e5e5;padding: 10px;border-radius: 5px;">
							<h4>确定要删除该<strong>ID:{{selectedId}}</strong>设备嘛？</h4>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button class="btn btn-info confirm-btn" (click)="savedata()" [disabled]="!locker_module_number||!product_id||disabled" *ngIf="btype==1">保存</button>
					<button class="btn  btn-danger" (click)="deldata()" *ngIf="btype==2">确定</button>
					<button class="btn  confirm-btn " (click)="myModal.hide();cancel();">取消</button>
				</div>
			</div>

		</div>
	</div>
</div>